<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
1.组件的意义
组件的出现是为了帮助前端页面有更好的划分，根据功能开发组件，但是组件不代表多个单独的页面。
Vue主打SPA(Single Page Application,单页面应用)，例如在index中同时包含登录和注册功能，
其中登录和注册就是两个组件，结合路由(即将学习)控制他们是否显示，用户点击登录就显示登录组件，点注册就显示注册在组件
<div id="app">
    <welcome :username="username"></welcome>
</div>
<script>
    //1.定义组件的模板对象
    var welcome = {
        template:"<div><h2>{{username}},用户登录</h2></div>",
        data(){
            return{
                user:this.username
            };
        },
        props:['username']
    }
    //2.定义多个模板对象
    var register = {
        template:"<div><h2>用户注册</h2></div>"
    }

    var app = new Vue({
        el: '#app',
        data: {
            username:"AnonyEast"
        },
        methods: {},
        components:{//注册组件
            welcome
        }
    });
</script>
</body>
</html>